<template>
    <div class="user_right fl ml20">
    <el-tabs v-model="couponType" @tab-click="couponClick">
      <el-tab-pane label="全部" name="first">
      </el-tab-pane>
      <el-tab-pane label="未使用" name="received">
      </el-tab-pane>
      <el-tab-pane label="已使用" name="used">
      </el-tab-pane>
    </el-tabs>
    <div class="userCoupon">
        <CouponItem v-if="List.length !== 0"  :data="List" :couponPath='2' :class="couponType === 'used'?'tests':''"></CouponItem>
          <img v-else class="zwyhImg" src="../../../assets/img/wyhqpng.png" alt="">
    </div>
    </div>
</template>
<script>
import { couponUserList } from '../../../api/goods'
import CouponItem from '@/components/coupon-item'
export default {
    components:{
        CouponItem
    },
    data() {
        return {
            couponType :'first',
            List:[],
            couponList: [],
            lqcouponList:[],
            sycouponList:[]
        }
    },
    created() {
        this.getCoupon()
    },
    methods: {
        couponClick(tap){
            switch(tap.name){
                case 'first':
                    this.List = this.couponList
                    break;
                case 'received':
                    this.List = this.lqcouponList
                    break;
                case 'used':
                    this.List = this.sycouponList
                    break; 
            }
        },
    async getCoupon() {
      const res = await couponUserList();
     this.List = this.couponList = res;
      res.forEach(item => {
          if(item.pivot_used === 0){
              this.lqcouponList.push(item)
          }else if(item.pivot_used === 1){
              this.sycouponList.push(item)
          }
          
      })
    },
    },
}
</script>

<style lang="scss">
    .user_right {
  width: 950px;
  background: #fff;
  /deep/.el-tabs {
    padding-bottom: 40px;
    padding: 30px;
    .el-tabs__header {
      height: 40px;
      border-bottom: 1px solid #e6e6e6;
      .el-tabs__item {
        padding: 0 20px;
        height: 40px;
        box-sizing: border-box;
        line-height: 40px;
        display: inline-block;
        list-style: none;
        font-weight: 500;
        color: #303133;
        position: relative;
        font-size: 18px;
      }
      .el-tabs__item:hover {
        color: #4448f8;
      }
      .el-tabs__active-bar {
        height: 3px;
        background-color: #4448f8;
      }
    }
    .el-tabs__content {
      color: #333;
      .ptb20 {
        padding-bottom: 20px;
      }
      .mt40 {
        margin-top: 40px;
      }
      .center {
        text-align: center;
        .ico_fail {
          background: url('~@/assets/img/fail_ico.png') no-repeat 0 0;
          width: 60px;
          height: 63px;
          display: inline-block;
        }
        p {
          color: #999;
          margin-top: 20px;
          font-size: 14px;
        }
      }
      ul {
        overflow: hidden;
        margin-top: 28px;
        li {
          position: relative;
          float: left;
          width: 162px;
          height: 237px;
          margin-left: 20px;
          border: 1px solid #e6e6e6;
          box-sizing: border-box;
          .goA {
            display: block;
          }
          .hd {
            height: 160px;
            padding: 10px 0;
            box-sizing: border-box;
            text-align: center;
            img {
              max-width: 100%;
            }
          }
        }
        li:first-child {
        margin-left: 0;
        }
        li:hover {
          border-color: #4448f8;
          display: block;
        }
        li:before {
          position: absolute;
          content: '查看详情';
          width: 100%;
          line-height: 25px;
          left: 0;
          top: 0;
          color: #fff;
          background: red;
          text-align: center;
          background: rgba(68,72,248,.7);
        }
      }
    }
  }
}
.userCoupon{
    min-height: 200px;
    padding: 0 70px;
}
.yhqbody{
    padding: 0!important;
}
.coupon_item{
    min-width: 40%!important;
    max-width: 40%!important;
    box-shadow: #ff0000 0px 0px 2px;
    border-radius: 10px;
}
.tests{
filter: grayscale(100%);
}
.zwyhImg{
  display: block;
  margin: 0 auto;
}
</style>